<template>
    <div class="account">
        <el-breadcrumb separator="/" style="margin-bottom:20px;">
            <el-breadcrumb-item :to="{ path: '/' }">
                <i class="el-icon-setting" style="margin-right:4px;"></i>首页</el-breadcrumb-item>
            <el-breadcrumb-item>账号管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm" :rules="rules">
            <el-form-item label="账号类型">
                <el-cascader expand-trigger="hover" :options="selectType" v-model="selectedOptions1" @change="handleType"></el-cascader>
            </el-form-item>
            <el-form-item label="集团选择">
                <el-cascader expand-trigger="hover" :options="selectCity" v-model="selectedOptions2" @change="handleCity"></el-cascader>
            </el-form-item>
            <el-form-item label="账号" prop="username">
                <el-input v-model="numberValidateForm.username" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="userword">
                <el-input v-model="numberValidateForm.userword" auto-complete="off" type="password"></el-input>
            </el-form-item>
            <el-form-item label="重复密码" prop="userwordTwo">
                <el-input v-model="numberValidateForm.userwordTwo" auto-complete="off" type="password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
                <el-button @click="resetForm('numberValidateForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    data() {
        return {
            selectType: [{
                value: 0,
                label: "超级管理员"
            }, {
                value: 1,
                label: "集团管理员"
            }],
            selectCity: [],
            selectedOptions1: [2],
            selectedOptions2: [],
            numberValidateForm: {
                username: "",
                userword: "",
                userwordTwo: "",
                user_type: 0,
                belong_gs: this.$store.state.grogshop.hotelId,
                belong_name: this.$store.state.login.belong_name,
            },
            rules: {
                username: [
                    { required: true, message: '请输入账号', trigger: 'blur' }
                ],
                userword: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ],
                userwordTwo: [
                    { required: true, message: '请重复输入密码', trigger: 'blur' }
                ]
            }
        };
    },
    mounted() {

        this.selectedOptions1.push(this.$store.state.login.user_type);
        for (let i = 0; i < this.selectType.length; i++) {
            if (this.selectType[i].value < this.$store.state.login.user_type) {
                this.selectType[i].disabled = true;
            }
        }

        //当前集团id
        this.selectedOptions2[0] = this.$store.state.grogshop.hotelId;

        //设置当前集团name
        if (this.$store.state.grogshop.hotelId === this.$store.state.login.belong_gs) {
            this.$store.commit("grogshopMessage", this.$store.state.login.belong_name);
        }

        //集团酒店获取
        this.$http.get(this.ajaxUrl() + "/index/mainGrogshop?type=1").then((response) => {
            this.selectCity = [];
            for (let i = 0; i < response.data.length; i++) {
                this.selectCity.push({
                    value: response.data[i].hotel_id,
                    label: response.data[i].hotel_name,
                })
            }
        })

    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.numberValidateForm.userword != this.numberValidateForm.userwordTwo) {
                        this.$message.error('两次输入密码不一样');
                    } else if (this.selectedOptions1.length === 0) {
                        this.$message.error('请选择一种账号类型');
                    } else {
                        this.$http.get(this.ajaxUrl() + "/user/userAdd", {
                            params: {
                                data: this.numberValidateForm
                            }
                        }).then((res) => {
                            if (res.data.type === 'fail') {
                                this.$message.error('账号增加失败');
                                this.numberValidateForm = {
                                    username: "",
                                    userword: "",
                                    userwordTwo: "",
                                    user_type: 2,
                                    belong_gs: this.$store.state.grogshop.hotelId,
                                    belong_name: this.$store.state.login.belong_name,
                                }
                            } else if (res.data.type === 'succeed') {
                                this.$message('账号增加成功');
                                this.$router.push('/account');
                            }
                        })
                    }
                } else {
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        handleType(value) {
            this.numberValidateForm.user_type = value[0]
        },
        handleCity(value) {
            this.numberValidateForm.belong_gs = value[0];

            let city = this.selectCity;
            for (let i = 0; i < city.length; i++) {
                if (city[i].value === value[0]) {
                    this.numberValidateForm.belong_name = city[i].label
                }
            }
        }
    }
}
</script>
<style>
.account {
    width: 300px;
}
</style>


